<!-- ModelRepository.vue -->
<template>
  <div class="model-repository">
    <div class="panel-header">
      <h2><el-icon><Box /></el-icon> 模型仓库</h2>
      <div class="model-filter">
        <el-input
            v-model="searchQuery"
            placeholder="搜索模型..."
            size="small"
            clearable
            style="width: 200px"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <div class="model-categories">
      <el-radio-group v-model="activeCategory" size="small">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="time">时频分析</el-radio-button>
        <el-radio-button label="cluster">聚类算法</el-radio-button>
        <el-radio-button label="classify">分类算法</el-radio-button>
        <el-radio-button label="feature">特征提取</el-radio-button>
      </el-radio-group>
    </div>

    <div class="model-grid">
      <div
          v-for="(model, index) in filteredModels"
          :key="index"
          class="model-card"
          :class="{ 'active': activeModel === model.id }"
          @click="selectModel(model.id)"
      >
        <div class="model-icon">
          <el-icon :size="32">
            <component :is="model.icon" />
          </el-icon>
        </div>
        <div class="model-name">{{ model.name }}</div>
        <div class="model-description">{{ model.description }}</div>
        <div class="model-stats">
          <div class="stat-item">
            <el-icon><Clock /></el-icon>
            <span>{{ model.time }}ms</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon>
            <span>{{ model.accuracy }}%</span>
          </div>
        </div>
        <div class="model-actions">
          <el-button type="primary" size="small" @click.stop="runModel(model.id)">
            <el-icon><MagicStick /></el-icon>
            运行
          </el-button>
          <el-button size="small" @click.stop="showDetails(model.id)">
            <el-icon><InfoFilled /></el-icon>
            详情
          </el-button>
        </div>
      </div>
    </div>

    <div class="model-details" v-if="selectedModel">
      <h3>模型详情: {{ selectedModel.name }}</h3>
      <div class="detail-content">
        <div class="detail-item">
          <label>算法类型:</label>
          <span>{{ selectedModel.type }}</span>
        </div>
        <div class="detail-item">
          <label>输入参数:</label>
          <span>{{ selectedModel.inputs.join(', ') }}</span>
        </div>
        <div class="detail-item">
          <label>输出结果:</label>
          <span>{{ selectedModel.outputs.join(', ') }}</span>
        </div>
        <div class="detail-item">
          <label>适用场景:</label>
          <span>{{ selectedModel.scenario }}</span>
        </div>
        <div class="parameter-controls">
          <h4>参数设置</h4>
          <div class="param-row" v-for="(param, idx) in selectedModel.params" :key="idx">
            <label>{{ param.name }}:</label>
            <el-slider
                v-model="param.value"
                :min="param.min"
                :max="param.max"
                :step="param.step"
                :show-input="true"
                size="small"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Box, Search, Clock, Star, MagicStick, InfoFilled, DataAnalysis, TrendCharts, SetUp, Place, Collection } from '@element-plus/icons-vue'
import {ElButton, ElIcon, ElInput, ElRadioButton, ElRadioGroup, ElSlider} from "element-plus";

const searchQuery = ref('')
const activeCategory = ref('all')
const activeModel = ref('stft')
const models = ref([
  {
    id: 'stft',
    name: '短时傅里叶变换',
    description: '时频分析基础方法',
    icon: 'DataAnalysis',
    category: 'time',
    time: 42,
    accuracy: 92,
    type: '时频分析',
    inputs: ['信号数据', '窗函数', '重叠率'],
    outputs: ['时频谱', '能量分布'],
    scenario: '非平稳信号分析',
    params: [
      { name: '窗长度', min: 64, max: 1024, step: 64, value: 256 },
      { name: '重叠率', min: 0, max: 90, step: 5, value: 75 }
    ]
  },
  {
    id: 'dbscan',
    name: 'DBSCAN聚类',
    description: '基于密度的聚类算法',
    icon: 'Place',
    category: 'cluster',
    time: 68,
    accuracy: 88,
    type: '聚类算法',
    inputs: ['特征向量', '距离阈值'],
    outputs: ['聚类标签', '核心点'],
    scenario: '信号源聚类分析',
    params: [
      { name: '邻域半径', min: 0.1, max: 5.0, step: 0.1, value: 1.5 },
      { name: '最小点数', min: 3, max: 20, step: 1, value: 5 }
    ]
  },
  {
    id: 'wavelet',
    name: '小波变换',
    description: '多尺度时频分析',
    icon: 'TrendCharts',
    category: 'time',
    time: 85,
    accuracy: 95,
    type: '时频分析',
    inputs: ['信号数据', '小波基函数'],
    outputs: ['小波系数', '尺度图'],
    scenario: '瞬态信号分析',
    params: [
      { name: '分解层数', min: 1, max: 10, step: 1, value: 6 },
      { name: '阈值系数', min: 0.1, max: 1.0, step: 0.1, value: 0.5 }
    ]
  },
  {
    id: 'kmeans',
    name: 'K-Means聚类',
    description: '经典聚类算法',
    icon: 'Collection',
    category: 'cluster',
    time: 38,
    accuracy: 82,
    type: '聚类算法',
    inputs: ['特征向量', '聚类数'],
    outputs: ['聚类中心', '类别标签'],
    scenario: '信号模式识别',
    params: [
      { name: '聚类数量', min: 2, max: 20, step: 1, value: 5 },
      { name: '最大迭代', min: 10, max: 500, step: 10, value: 100 }
    ]
  },
  {
    id: 'svm',
    name: '支持向量机',
    description: '分类与回归分析',
    icon: 'SetUp',
    category: 'classify',
    time: 75,
    accuracy: 90,
    type: '分类算法',
    inputs: ['特征向量', '标签数据'],
    outputs: ['分类结果', '决策边界'],
    scenario: '信号类型识别',
    params: [
      { name: '惩罚系数', min: 0.1, max: 10.0, step: 0.1, value: 1.0 },
      { name: '核函数', value: 'RBF' }
    ]
  },
  {
    id: 'pca',
    name: '主成分分析',
    description: '降维与特征提取',
    icon: 'SetUp',
    category: 'feature',
    time: 52,
    accuracy: 85,
    type: '特征提取',
    inputs: ['高维特征'],
    outputs: ['主成分', '降维数据'],
    scenario: '特征降维处理',
    params: [
      { name: '主成分数', min: 1, max: 20, step: 1, value: 5 },
      { name: '方差阈值', min: 0.7, max: 0.99, step: 0.01, value: 0.95 }
    ]
  }
])

const filteredModels = computed(() => {
  let result = models.value

  // 根据类别过滤
  if (activeCategory.value !== 'all') {
    result = result.filter(model => model.category === activeCategory.value)
  }

  // 根据搜索查询过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(model =>
        model.name.toLowerCase().includes(query) ||
        model.description.toLowerCase().includes(query)
    )
  }

  return result
})

const selectedModel = computed(() => {
  return models.value.find(model => model.id === activeModel.value)
})

const selectModel = (modelId) => {
  activeModel.value = modelId
}

const runModel = (modelId) => {
  console.log('运行模型:', modelId)
}

const showDetails = (modelId) => {
  activeModel.value = modelId
}
</script>

<style scoped>
.model-repository {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #9c42ff;
}

.model-categories {
  margin-bottom: 2vh;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5vh;
  height: 35vh;
  overflow-y: auto;
  padding-right: 0.5vw;
}

.model-card {
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  border: 1px solid rgba(93, 102, 224, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.model-card.active {
  border-color: #4db8ff;
  box-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
}

.model-icon {
  color: #4db8ff;
  margin-bottom: 1vh;
  text-align: center;
}

.model-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: #c0d1ff;
  margin-bottom: 0.5vh;
  text-align: center;
}

.model-description {
  font-size: 0.9rem;
  color: #a0bff0;
  margin-bottom: 1.5vh;
  text-align: center;
}

.model-stats {
  display: flex;
  justify-content: center;
  gap: 1.5vw;
  margin-bottom: 1.5vh;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  font-size: 0.9rem;
  color: #a0bff0;
}

.stat-item .el-icon {
  color: #9c42ff;
}

.model-actions {
  display: flex;
  justify-content: center;
  gap: 0.8vw;
}

.model-details {
  flex: 1;
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  margin-top: 1.5vh;
}

.model-details h3 {
  font-size: 1.05rem;
  margin: 0 0 1.5vh;
  color: #c0d1ff;
  font-weight: 500;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
}

.detail-item {
  display: flex;
}

.detail-item label {
  width: 80px;
  color: #4db8ff;
  font-weight: 500;
}

.detail-item span {
  flex: 1;
  color: #a0bff0;
}

.parameter-controls {
  margin-top: 2vh;
}

.parameter-controls h4 {
  font-size: 1rem;
  margin: 0 0 1.5vh;
  color: #c0d1ff;
  font-weight: 500;
}

.param-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.5vh;
}

.param-row label {
  width: 100px;
  color: #a0bff0;
}

:deep(.el-slider) {
  flex: 1;
}
</style>